<template>
  <div class="content">
    <el-row>
      <el-col :span="8">
        站点密度
      </el-col>
<!--      <el-col :span="5">-->
<!--        <el-button class="btn" size="small" @click="handlClickA">-->
<!--          关键站点位-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="5">-->
<!--        <el-button class="btn" size="small" @click="handlClickB">-->
<!--          退服点位-->
<!--        </el-button>-->
<!--      </el-col>-->
    </el-row>
    <el-row>
      <div ref="container" :class="className" :style="{height:height,width:width}"/>
    </el-row>
  </div>
</template>

<script>
let echarts = require('echarts')
require('echarts/extension/bmap/bmap')
require('echarts/theme/macarons') // echarts theme
import mapData from './HotData.json'
import resize from './mixins/resize'

const animationDuration = 3000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      let offset = [123.429096 - 120.13066322374, 41.796767 - 30.240018034923]
      this.chart = echarts.init(this.$refs['container'])
      var points = [].concat.apply(
        [],
        mapData.map(function(track) {
          return track.map(function(seg) {
            seg.coord[0] += offset[0]
            seg.coord[1] += offset[1]
            return seg.coord.concat([1])
          })
        })
      )
      this.chart.setOption({
        // 加载 bmap 组件
        bmap: {
          center: [123.429096, 41.796767],
          zoom: 12,
          roam: true
        },
        visualMap: {
          show: false,
          top: 'top',
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ['blue', 'blue', 'green', 'yellow', 'red']
          }
        },
        series: [{
          type: 'heatmap',
          coordinateSystem: 'bmap',
          data: points,
          pointSize: 5,
          blurSize: 6
        }]

      })
    }
  }
}
</script>
<style scoped>
.btn {

}
</style>
